<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<header style="padding: 5px">
		<form>
		<input type="text" name="q">
		<button>关键词</button>
		</form>
	</header>

	<div class="point" open-button status="1" for="#list">收起列表<span class="status">-</span></div>
	<div id="list" class="list" style="border:1px solid #ececec;">
        <style type="text/css">
            #list{
                background: #656565;
                color: #f9f9f9;
            }
            #edit_content{
                height: 300px;
                overflow-y: auto;
                background: #656565;
                color: #f9f9f9;
                border: none;
                padding: 10px;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            #edit_content:focus{
                border: none;
            }
        </style>
		<div id="edit_content" class="edit_content" contenteditable="true">
		<p>test jisa fdsj dsjia.fwe fji the a test think member.</p>
		<p>test jisa fdsj dsjia.fwe fji the a test think member.</p>
		<p>test jisa fdsj dsjia.fwe fji the a test think member.</p>
		<p>test jisa fdsj dsjia.fwe fji the a test think member.</p>
		<p>test jisa fdsj dsjia.fwe fji the a test think member.</p>
		<p>test jisa fdsj dsjia.fwe fji the a test think member.</p>
		<p>test jisa fdsj dsjia.fwe fji the a test think member.</p>
		<p>test jisa fdsj dsjia.fwe fji the a test think member.</p>
		<p>test jisa fdsj dsjia.fwe fji the a test think member.</p>
		<p>test jisa fdsj dsjia.fwe fji the a test think member.</p>
		</div>
        <div id="tip">test</div>
	</div>

    <div>
        <a href="#" onclick="getSelect();return false">获取选中内容</a>
    </div>

    <div>
        <button>选中加粗</button>
    </div>

	<div class="point" open-button status="0" for="#footer">添加数据<span class="status">+</span></div>
	<footer id="footer" style="display: none">
	
	</footer>

	<script src="/component/jquery.min.js"></script>
	<script type="text/javascript">
        function getSelect(){
            var selection = window.getSelection?window.getSelection():document.selection.createRange();
            var arange = selection.getRangeAt(0);
            var fragment = arange.cloneContents();
            fr = arange.extractContents();
            //var ele=document.createElement('b');
            //ele.append(fragment);
            arange.insertNode(fr);
            selection.empty();
            //console.log(ele);
        }
$(document).mousedown(function(){
    /*
    var range2 = document.createRange();
    var startNode = document.getElementsByClassName("edit_content")[0];
    //childNode会将html换行加进去
    for (var i = 0; i < startNode.childNodes.length; i++) {
        if (startNode.childNodes[i].nodeName == "#text" && !/\s/.test(startNode.childNodes.nodeValue)) {
            startNode.removeChild(startNode.childNodes[i])
        }
    }
    console.log(startNode.childNodes[5]);
    range2.setStart(startNode.childNodes[5].firstChild, 2);
    range2.setEnd(startNode.childNodes[7].firstChild, 8);
    var selection2 = window.getSelection();
    selection2.removeAllRanges();
    selection2.addRange(range2)
    */
});
$(document).on('click',function (event) {
/*
    var range2 = document.createRange();
    var startNode = document.getElementsByClassName("edit_content")[0];
    //childNode会将html换行加进去
    for (var i = 0; i < startNode.childNodes.length; i++) {
        if (startNode.childNodes[i].nodeName == "#text" && !/\s/.test(startNode.childNodes.nodeValue)) {
            startNode.removeChild(startNode.childNodes[i])
        }
    }
    console.log(startNode.childNodes[5]);
    range2.setStart(startNode.childNodes[5].firstChild, 2);
    range2.setEnd(startNode.childNodes[7].firstChild, 8);
    var selection2 = window.getSelection();
    selection2.removeAllRanges();
    selection2.addRange(range2)

    return false;
*/
});
$(document).on('keydown',function (event) {
    console.log($(this).html())
    if(event.keyCode == 9){

        // 获取光标的range对象 event.view 是一个window对象
        let range = event.view.getSelection().getRangeAt(0);
        console.log(range)
        // 光标的偏移位置
        let offset = range.startOffset;
        // 新建一个span元素
        //let span = document.createElement('span');
        let span = document.createTextNode("\t");
        // 四个 表示四个空格
        //span.innerHTML = "\t";
        // 创建一个新的range对象
        let newrange = document.createRange();
        // 设置新的range的位置，也是插入元素的位置
        newrange.setStart(range.startContainer, offset);
        newrange.setEnd(range.startContainer, offset);
        newrange.collapse(true);
        newrange.insertNode(span);
        // 去掉旧的range对象，用新的range对象替换
        event.view.getSelection().removeAllRanges();
        event.view.getSelection().addRange(range);

        // 将光标的位置向后移动一个偏移量，放到加入的四个空格后面
        range.setStart(span, 1);
        range.setEnd(span, 1);

        return false;
    }
});
$('#edit_content').on('keyup',function (event) {
    if(event.keyCode == 9){
        t = "<span>\t</span>";
        $(this).append(t);
        return false;
    }
});
		//调试环境 chrome
	//获取选中内容
	/*
	document.getElementById("edit_content").onclick = function () {
        var txt = window.getSelection ? window.getSelection() : document.selection.createRange().text;
        console.log(txt);//alert默认调用了toString()
    }
    */
    //清除选中的文字
    /*
    document.getElementById("edit_content").onclick = function () {
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    }
    */
    
    //分段式选中,可用nodeType判断
    //如果起始节点类型是 Text， Comment, or CDATASection之一, 那么 startOffset指的是从起始节点算起字符的偏移量。
    /*
    var range2 = document.createRange();
    var startNode = document.getElementsByTagName("p")[0].firstChild;

    var startOffset = 1;
    range2.setStart(startNode, startOffset);
    var endOffset = 7;
    range2.setEnd(startNode, endOffset);
    var selection2 = window.getSelection();
    selection2.removeAllRanges();
    selection2.addRange(range2)
    */
    //分段式选中2
    // 对于其他 Node 类型节点， startOffset 是指从起始结点开始算起子节点的偏移量。
    /*
    var range2 = document.createRange();
    var startNode = document.getElementsByClassName("edit_content")[0];
    console.log(startNode)
    //childNode会将html换行加进去
    for (var i = 0; i < startNode.childNodes.length; i++) {
        if (startNode.childNodes[i].nodeName == "#text" && !/\s/.test(startNode.childNodes.nodeValue)) {
            startNode.removeChild(startNode.childNodes[i])
        }
    }
    var startOffset = 3;
    range2.setStart(startNode, startOffset);
    var endOffset = startNode.childNodes.length - 2;
    range2.setEnd(startNode, endOffset);
    var selection2 = window.getSelection();
    selection2.removeAllRanges();
    selection2.addRange(range2)
    */
    //分段式选中3
    //跨段文字特定位置选中
    var range2 = document.createRange();
    var startNode = document.getElementsByClassName("edit_content")[0];
    //childNode会将html换行加进去
    for (var i = 0; i < startNode.childNodes.length; i++) {
        if (startNode.childNodes[i].nodeName == "#text" && !/\s/.test(startNode.childNodes.nodeValue)) {
            startNode.removeChild(startNode.childNodes[i])
        }
    }
    console.log(startNode.childNodes[5]);
    range2.setStart(startNode.childNodes[5].firstChild, 2);
    range2.setEnd(startNode.childNodes[7].firstChild, 8);
    var selection2 = window.getSelection();
    selection2.removeAllRanges();
    selection2.addRange(range2)
	</script>
</body>
</html>